<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书-历史借阅查询功能</title><!--用户-->
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/utilJs.js"></script>
    <script src="/static/js/echarts/echarts.js"></script>
</head>
<style>
    *{
        font-size: 14px
    }
    [v-cloak] {
        display: none;
    }
</style>
<body style="background-color: #fff">
    <!--准备一个呈现图表的盒子-->
    <div id="main" style="width: 80%;height:250px;">

    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        //let myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        let chartDom = document.getElementById('main');
        let myChart = echarts.init(chartDom);//指定echarts最终呈现的位置
        let option;
        //配置项说明文档 https://echarts.apache.org/zh/option.html#series

        let xAxisYear = [];
        let yAxisYear = [];
        let yearMonthBarArrGlobal = [];

        requestApiTB("record/getUserRecordBarData",{},'post',function(res){
            if(res.code === 0 ){
                //{"msg":"执行成功","code":0,"data":{"yearBar":[{"year":2022,"num":1,"month":null}],"yearMonthBar":[{"year":2022,"num":1,"month":7}]}}
                let yearBarArr = res.data.yearBar;
                let yearMonthBarArr = res.data.yearMonthBar;
                if(yearBarArr){
                    for(let i = 0 ;i < yearBarArr.length ; i++){
                        xAxisYear.push(yearBarArr[i].year + "年");
                        yAxisYear.push( {
                            "value" : yearBarArr[i].num,
                            "dataYear" : yearBarArr[i].year,
                            "isOuter" : true
                        });
                    }
                }
                if(yearMonthBarArr){
                    yearMonthBarArrGlobal = yearMonthBarArr;
                }

                // myChart.setOption({
                //     xAxis: {
                //         data: subData.data.map(function (item) {
                //             return item[0];
                //         })
                //     },
                //     series: {
                //         type: 'bar',
                //         id: 'sales',
                //         dataGroupId: subData.dataGroupId,
                //         data: subData.data.map(function (item) {
                //             return item[1];
                //         }),
                //         universalTransition: {
                //             enabled: true,
                //             divideShape: 'clone'
                //         }
                //     },
                //     graphic: [
                //         {
                //             type: 'text',
                //             left: 50,
                //             top: 20,
                //             style: {
                //                 text: 'Back',
                //                 fontSize: 18
                //             },
                //             onclick: function () {
                //                 myChart.setOption(option);
                //             }
                //         }
                //     ]
                // });
            }else{
                alert(res.msg);
            }
        });

        option = {
            // title:{
            //     text:'读者借阅数量'
            // },
            //直角坐标系中的x轴
            xAxis: {
                name:"借阅情况",//坐标轴名称。
                nameGap: 50,
                nameLocation:"center",
                type:'category',//类目轴
                //data: ['Animals', 'Fruits', 'Cars']//
                data: xAxisYear//
            },
            yAxis: {
                name:"读者借阅数量",//坐标轴名称。
                nameLocation:"center",
                nameGap: 50,
                type : 'value',//数值轴 设置为value之后 data就没有效果了
                min : 0,//在该轴上的最小值走位最小刻度
                minInterval : 1,//自动计算的坐标轴最小间隔大小，设置成1保证坐标轴分割刻度显示成整数
            },//直角坐标系中的y轴
            dataGroupId : '',
            animationDurationUpdate : 500,//动画时长
            //系列列表，每个系列通过tyoe决定自己的图表类型
            series: {
                type: 'bar',//柱状图 图表类型
                id: 'sales',
                label:{
                    show:true
                },
                //data: [
                    // {
                    //     value: 5,
                    //     groupId: 'animals'//这个到时候关联下面的drilldownData的
                    // },
                    // {
                    //     value: 2,
                    //     groupId: 'fruits'
                    // },
                    // {
                    //     value: 4,
                    //     groupId: 'cars'
                    // }
                //],
                data : yAxisYear,
                universalTransition: {//过渡动画
                    enabled: true,
                    divideShape: 'clone'//决定在一对多或者多对一的动画中，当前系列的图形如何分裂多个图形
                }
            }
        };
        const drilldownData = [
            // {
            //     dataGroupId: 'animals',
            //     data: [
            //         ['Cats', 4],
            //         ['Dogs', 2],
            //         ['Cows', 1],
            //         ['Sheep', 2],
            //         ['Pigs', 1]
            //     ]
            // },
            // {
            //     dataGroupId: 'fruits',
            //     data: [
            //         ['Apples', 4],
            //         ['Oranges', 2]
            //     ]
            // },
            // {
            //     dataGroupId: 'cars',
            //     data: [
            //         ['Toyota', 4],
            //         ['Opel', 2],
            //         ['Volkswagen', 2]
            //     ]
            // }
        ];
        myChart.on('click', function (event) {//点击最外层的数据
            if (event.data) {
                if(!event.data.isOuter){//点击的是月份
                    myChart.setOption(option);
                    return;
                }
                let needShowXData = [
                    "1","2","3","4","5","6","7","8","9","10","11","12"
                ];
                let needShowyData = [
                    "","","","","","","","","","","",""
                ];
                for(let i = 0 ;i < yearMonthBarArrGlobal.length ; i++){
                    if(yearMonthBarArrGlobal[i].year == event.data.dataYear){//年份相同
                        needShowyData[yearMonthBarArrGlobal[i].month -1 ] = yearMonthBarArrGlobal[i].num;
                    }
                }
                let xName = event.data.dataYear + "年借阅情况";


                //重新设置echart的数据
                myChart.setOption({
                    xAxis: {
                        name:xName,
                        type : 'category',
                        data : needShowXData,
                        // data: subData.data.map(function (item) {
                        //     return item.month;
                        // })
                    },
                    series : {
                        type : 'bar',
                        id : 'sales',
                        //dataGroupId: subData.dataGroupId,
                        data : needShowyData,
                        // data: subData.data.map(function (item) {
                        //     return item.value;
                        // }),
                        universalTransition : {
                            enabled : true,
                            divideShape : 'clone'
                        }
                    },
                    // graphic: [//原生图形元素组件，
                    //     {
                    //         type: 'text',
                    //         left: 50,
                    //         top: 20,
                    //         style: {
                    //             text: 'Back',
                    //             fontSize: 18
                    //         },
                    //         onclick: function () {
                    //             myChart.setOption(option);
                    //         }
                    //     }
                    // ]
                });
            }
        });

        // 使用刚指定的配置项和数据显示图表。 绘制图表
        myChart.setOption(option);
    </script>
<div id="app">
    <div class="mt-8 ml-4">
        <!--https://echarts.apache.org/examples/zh/editor.html?c=bar-drilldown-->
<!--        https://echarts.apache.org/examples/zh/editor.html?c=bar-drilldown-->
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->


        <div class="mt-9">
            <div class="df-aic">
                <span >起始时间</span>
                <el-date-picker size="small"
                        v-model="dateSelectValue"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期" class="ml-2" value-format="yyyy-MM-dd">
                </el-date-picker>
                <el-select size="small" style="width:150px;" v-model="queryParam.queryType" class="ml-2">
                    <el-option value="1" label="书籍名称"></el-option>
                    <el-option value="2" label="条码号"></el-option>
                    <el-option value="3" label="作者"></el-option>
                    <el-option value="4" label="索书号"></el-option>
                    <el-option value="5" label="ISBN"></el-option>
                </el-select>
                <el-input placeholder="请输入搜索内容" size="small" style="width:200px;" v-model="queryParam.keyWord" class="ml-2"></el-input>
                <el-button size="small" type="primary" class="ml-2" @click="getTableDataMethod(true)">查询</el-button>
            </div>


            <el-table :data="tableData" v-loading="tableDataLoading">
                <el-table-column prop="ticketNumber" label="条形码"></el-table-column>
                <el-table-column prop="bookName" label="书籍名称"></el-table-column>
                <el-table-column prop="isbn" label="isbn"></el-table-column>
                <el-table-column prop="author" label="著者"></el-table-column>
                <el-table-column prop="indexBookNumber" label="索书号"></el-table-column>
                <el-table-column prop="shelfMark" label="排架号"></el-table-column>
                <el-table-column label="借出日期">
                    <template slot-scope="scope">
                        <span v-if="scope.row.rentDate">
                            {{scope.row.rentDate.split(" ")[0]}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="应还日期">
                    <template slot-scope="scope">
                        <span v-if="scope.row.shouldBackDate">
                            {{scope.row.shouldBackDate.split(" ")[0]}}
                        </span>
                    </template>
                </el-table-column>

                <el-table-column label="实际归还日期">
                    <template slot-scope="scope">
                        <span v-if="scope.row.backDate">
                            {{scope.row.backDate.split(" ")[0]}}
                        </span>
                    </template>
                </el-table-column>


            </el-table>

            <el-pagination background layout="total,sizes,prev, pager, next" :total="tableDataPaging.total"
                           :page-sizes="[10, 20, 50]"
                           prev-text="上一页" next-text="下一页"
                           :page-size="tableDataPaging.pageSize"
                           :current-page="tableDataPaging.currentPage"
                           @current-change="tableDataPagingChange"
                           @prev-click="tableDataPagingChange" @next-click="tableDataPagingChange"
                           @size-change="tableDataPagingSizeChange"
                           style="float:right;margin-top: 40px;padding-bottom:50px;">
            </el-pagination>

        </div>
    </div>

</div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                dateSelectValue: '',
                queryParam:{
                    queryType:"1",
                    keyWord:""
                },
                tableData:[],
                tableDataLoading:false,
                tableDataPaging : {
                    currentPage : 1,
                    pageSize : 10,
                    total : 0,
                },
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.getTableDataMethod();
            });
        },
        methods: {
            //获取表格的数据
            getTableDataMethod(isChongZhi){
                let that = this;
                if (isChongZhi) {
                    this.tableDataPaging.currentPage = 1;
                }


                const {queryType,keyWord} = this.queryParam
                let queryData = {
                    queryType:queryType,
                    keyWord: $.trim(keyWord),
                    startDate: "",
                    endDate: "",
                    pageNum: this.tableDataPaging.currentPage,
                    pageSize: this.tableDataPaging.pageSize,
                }
                if(that.dateSelectValue){
                    queryData.startDate = that.dateSelectValue[0];
                    queryData.endDate = that.dateSelectValue[1];
                }
                this.tableDataLoading = true;
                that.tableData = [];
                console.log(queryData);
                requestApiTB("record/getRecordHistoryList",queryData,'post',function(res){
                    that.tableDataLoading = false;
                    if (res.code === 0) {
                        that.tableData = res.data.list;
                        that.tableDataPaging.total = res.data.total;
                    }

                });
            },
            tableDataPagingChange(val) {
                let that = this;
                that.tableDataPaging.currentPage = val;
                that.getTableDataMethod();
            },
            tableDataPagingSizeChange(val) {
                let that = this;
                that.tableDataPaging.pageSize = val;
                that.getTableDataMethod();
            },









        }
    })
</script>
</html>